<template>
  <div>
    <el-form ref="form" :model="form" label-width="80px">
      <el-form-item label="活动名称">
        <el-input v-model="form.owner"></el-input>
      </el-form-item>
      <el-form-item label="创建日期">
        <el-col :span="11">
          <el-date-picker type="date" placeholder="选择日期" v-model="form.former" style="width: 100%;"></el-date-picker>
        </el-col>
        <el-col class="line" :span="2">-</el-col>
        <el-col :span="11">
          <el-date-picker type="date" placeholder="选择时间" v-model="form.hoo" style="width: 100%;"></el-date-picker>
        </el-col>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="onSubmit">搜索</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>

    <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%">
      <el-table-column
          type="selection"
          width="55">
      </el-table-column>
      <el-table-column
          prop="owner"
          label="车主">
      </el-table-column>
      <el-table-column
          prop="licensePlate"
          label="车牌号">
      </el-table-column>
      <el-table-column
          prop="refuelingAmount"
          label="加油量">
      </el-table-column>
      <el-table-column
          prop="postage"
          label="油费">
      </el-table-column>
      <el-table-column
          prop="paymentMethod"
          label="支付方式">
        <template slot-scope="scope">
        <span v-if="scope.row.paymentMethod==1">支付宝</span>
        <span v-if="scope.row.paymentMethod==2">微信</span>
        <span v-if="scope.row.paymentMethod==3">银行</span>
        <span v-if="scope.row.paymentMethod==4">信用卡</span>
      </template>
      </el-table-column>
      <el-table-column
          prop="operator"
          label="操作人">
      </el-table-column>
      <el-table-column
          prop="creationTime"
          label="创建时间">
        <template slot-scope="scope">{{ scope.row.creationTime }}</template>
      </el-table-column>
      <el-table-column
          fixed="right"
          label="操作"
          width="100">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small">编辑</el-button>
          <el-button @click="deletes(scope.row)" type="text" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="form.pages"
        :page-sizes="[10,11,12,13]"
        :page-size="form.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
    </el-pagination>

    <el-dialog title="编辑" :visible.sync="dialogFormVisible">
      <el-form :model="formInfo">
        <el-form-item label="车主" :label-width="formLabelWidth">
          <el-input v-model="formInfo.owner" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="车牌号" :label-width="formLabelWidth">
          <el-input v-model="formInfo.licensePlate" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="加油量" :label-width="formLabelWidth">
          <el-input v-model="formInfo.refuelingAmount" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="油费" :label-width="formLabelWidth">
          <el-input v-model="formInfo.postage" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="支付方式" :label-width="formLabelWidth">
          <el-select v-model="formInfo.paymentMethod" placeholder="请选择支付方式">
            <el-option label="支付宝" value="1"></el-option>
            <el-option label="微信" value="2"></el-option>
            <el-option label="银行" value="3"></el-option>
            <el-option label="信用卡" value="4"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="备注" :label-width="formLabelWidth">
          <el-input v-model="formInfo.beiz" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="adder">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import axios from "axios";
export default {
  data(){
    return{
      form:{
        owner:"",
        former:"",
        hoo:"",
        pages:1,
        size:10
      },
      formInfo:{
        owner:"",
        licensePlate:"",
        refuelingAmount:"",
        postage:"",
        paymentMethod:"",
        beiz:""
      },
      tableData:[],
      total:0,
      dialogFormVisible:false,
      formLabelWidth: '120px'
    }
  },
  created() {
    this.onSubmit();
  },
  methods:{
    onSubmit(){
      axios.post("http://localhost:10086/finance/car/All",this.form).then(res=>{
        this.tableData=res.data.data.records;
        this.total=res.data.data.total;
      })
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.form.size=val;
      this.onSubmit();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.form.pages=val;
      this.onSubmit();
    },
    deletes(row){
    axios.get(`http://localhost:10086/finance/car/delete?id=${row.id}`).then(res => {
      if (res.data.code === 200) {
        this.$message({
          message: '删除成功',
          type: 'success'
        });
        // 从 tableData 中移除已删除的记录
        this.tableData = this.tableData.filter(item => item.id !== row.id);
      } else {
        this.$message.error('删除失败');
      }
    }).catch(error => {
      console.error('删除请求失败:', error);
      this.$message.error('删除失败');
    })
  },
    handleClick(){
      this.formInfo={}
      this.dialogFormVisible=true;
    },
    adder(){
      axios.post('http://localhost:10086/finance/car/findAdd', this.formInfo).then(res => {
        if (res.data.code === 200) {
          this.$message({
            message: '添加成功',
            type: 'success'
          });
          // 将新添加的数据添加到 tableData 中
          this.tableData.push(res.data.data);
          // 关闭对话框
          this.dialogFormVisible = false;
        } else {
          this.$message.error('添加失败');
        }
      }).catch(error => {
        console.error('添加请求失败:', error);
        this.$message.error('添加失败');
      });
    }


  }

}
</script>

<style>

</style>